<template>
  <div>
    <!-- 面包屑导航 -->
    <a-breadcrumb style="margin-bottom: 10px">
      <a-breadcrumb-item>
        <icon-menu-unfold />
      </a-breadcrumb-item>
      <a-breadcrumb-item>光伏设备</a-breadcrumb-item>
      <a-breadcrumb-item>设备分组</a-breadcrumb-item>
    </a-breadcrumb>

    <a-card>
      <!-- 查询条件区域 -->
      <a-row>
        <a-col :flex="1" style="margin-top: 4px">
          <a-form :model="searchModel" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }" label-align="left" auto-label-width>
            <a-row :gutter="8">
              <a-col :span="8">
                <a-form-item label="分类状态">
                  <a-select v-model="searchModel.stopFlag" placeholder="请选择" allow-clear>
                    <a-option value="0">正常</a-option>
                    <a-option value="1">停用</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-divider style="height: 35px" direction="vertical" />
              <a-col :span="8">
                <a-col :flex="'86px'">
                  <a-space :size="18">
                    <a-button type="primary" @click="search">
                      <template #icon>
                        <icon-search />
                      </template>
                      {{ '查询' }}
                    </a-button>
                  </a-space>
                </a-col>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
      </a-row>

      <!-- 分割线 -->
      <a-divider style="margin-top: 0" />

      <!-- 表格内容区域 -->
      <a-table :loading="loading" row-key="id" :pagination="false" :bordered="{ wrapper: true, cell: true }" :columns="columns" :data="renderData">
        <template #stopFlag="{ record }">
          <stop-flag :value="record.stopFlag" />
        </template>
        <template #operate="{ record }">
          <a-button size="small" type="text" :status="record.stopFlag === '1' ? 'normal' : 'warning'" @click="handleStopFlag(record)">
            {{ record.stopFlag === '0' ? '停用' : '启用' }}
          </a-button>
        </template>
      </a-table>

      <!-- 操作确认对话框 -->
      <a-modal width="450px" v-model:visible="operateModalModel.visible" class="modal-box">
        <template #title>
          <icon-exclamation-circle size="18" style="color: rgb(var(--orange-6)); margin-right: 5px" />
          确认提示
        </template>
        <div style="text-align: center">是否确认{{ operateModalModel.title }}名称为【{{ operateModalModel.name }}】的数据项？</div>
        <template #footer>
          <div style="text-align: center">
            <a-space>
              <a-button type="primary" status="danger" @click="handleOperateModelCancle">取消</a-button>
              <a-button type="primary" @click="handleOperateModelOk">确认</a-button>
            </a-space>
          </div>
        </template>
      </a-modal>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import useLoading from '../../utils/loading';
import StopFlag from '../../components/stop-flag/index.vue';
import { listGroupAll } from '../../apis/device';

// 加载状态管理
const { loading, setLoading } = useLoading(true);

// 生成查询条件初始对象
const generateSearchModel = () => {
  return {
    stopFlag: '', // 状态筛选条件
    mapId: 3      // 固定值，设备类型标识
  };
};

// 查询表单数据模型
const searchModel = ref(generateSearchModel());

// 表格列定义
const columns = computed(() => [
  {
    title: '编号',
    dataIndex: 'id',
    align: 'center',
    width: 100
  },
  {
    title: '分组名称',
    dataIndex: 'groupName'
  },
  {
    title: '备注',
    dataIndex: 'remark'
  },
  {
    title: '状态',
    dataIndex: 'stopFlag',
    slotName: 'stopFlag',
    align: 'center',
    width: 100
  },
  {
    title: '操作',
    dataIndex: 'operations',
    width: 210,
    slotName: 'operate',
    align: 'center'
  }
]);

// 表格渲染数据（模拟数据）
const renderData = ref([
  {
    id: 'group-001',
    groupName: '光伏板组A',
    remark: '楼顶光伏板',
    stopFlag: '0'
  },
  {
    id: 'group-002',
    groupName: '逆变器组B',
    remark: '一号机房逆变器',
    stopFlag: '0'
  },
  {
    id: 'group-003',
    groupName: '储能设备组C',
    remark: '备用储能系统',
    stopFlag: '1'
  }
]);

/**
 * 获取表格数据（仅调用listGroupAll接口）
 */
const fetchData = async () => {
  setLoading(true);

  try {
    const res = await listGroupAll({
      ...searchModel.value
    });
    renderData.value = res.data.data || [];

    // 开发阶段使用模拟数据（实际项目中删除）
    const filteredData = renderData.value.filter(item => {
      if (searchModel.value.stopFlag == '') return true;
      return item.stopFlag == searchModel.value.stopFlag;
    });
    renderData.value = filteredData;

  } catch (err) {
    console.error('获取设备分组数据失败', err);
  } finally {
    setLoading(false);
  }
};

/**
 * 递归移除空的子节点（实际项目中根据接口数据结构调整）
 */
const removeEmptyChildren = (data: any[]) => {
  data.forEach((item, index) => {
    if (item.children && item.children.length === 0) {
      delete data[index].children;
    } else if (item.children) {
      removeEmptyChildren(item.children);
    }
  });
};

// 组件挂载时初始化数据
onMounted(async () => {
  await fetchData();
});

/**
 * 执行查询操作
 */
const search = async () => {
  await fetchData();
};

// 生成操作对话框初始数据模型
const generateOperateModalModel = () => {
  return {
    visible: false,      // 对话框是否显示
    title: '',           // 操作标题（停用/启用）
    id: '',              // 操作数据ID
    value: '',           // 要设置的状态值
    name: ''             // 数据项名称
  };
};

// 操作对话框数据模型
const operateModalModel = ref(generateOperateModalModel());

/**
 * 关闭操作对话框
 */
const handleOperateModelCancle = () => {
  operateModalModel.value = generateOperateModalModel();
};

/**
 * 确认操作对话框（仅修改本地数据）
 */
const handleOperateModelOk = () => {
  // 查找并更新本地数据
  const targetIndex = renderData.value.findIndex(item => item.id === operateModalModel.value.id);
  if (targetIndex !== -1) {
    renderData.value[targetIndex].stopFlag = operateModalModel.value.value;
  }

  // 关闭对话框
  handleOperateModelCancle();
};

/**
 * 处理停用/启用操作（仅修改本地数据）
 * @param record 要操作的数据项
 */
const handleStopFlag = (record: any) => {
  operateModalModel.value.visible = true;
  operateModalModel.value.id = record.id;
  operateModalModel.value.title = record.stopFlag === '0' ? '停用' : '启用';
  operateModalModel.value.name = record.groupName;
  operateModalModel.value.value = record.stopFlag === '0' ? '1' : '0';
};
</script>

<style scoped>
.modal-box {
  /* 对话框样式自定义 */
}
</style>